<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
	<meta http-equiv="pragma" content="no-cache" />
    <meta name="author" content="Jayli" />
	<meta name="keywords" content="淘宝UED 前端工程师 拔赤" />	
	<meta name="description" content="淘宝前端工程师拔赤，关注尖端前端技术，关注yui" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta name="title" content="拔赤的文章列表" />
    <title>将你的 KISSY 程序移植到服务器端 – nodejs-kissy 项目简介</title>
    <link href="http://jayli.github.com/blog/atom.xml" rel="alternate" title="setImpl" type="application/atom+xml" />
    <link rel="stylesheet" href="http://jayli.github.com/blog/media/css/style.css">
    <link rel="stylesheet" href="http://jayli.github.com/blog/media/css/github.css">
	<style>
	</style>
    <script type="text/javascript" src="http://jayli.github.com/blog/media/js/highlight.pack.js"></script>
    <script type="text/javascript">
      hljs.initHighlightingOnLoad();
    </script>
	<!--[if lte IE 8]>
	<script src="http://a.tbcdn.cn/apps/lottery/00023/index-v3/js/html5.js"></script>
	<![endif]-->
	<meta name="baidu-tc-verification" content="afb6c9df553ef3493d9ee65263df0d55" />
	<script src="http://siteapp.baidu.com/static/webappservice/uaredirect.js" type="text/javascript"></script><script type="text/javascript">uaredirect("http://m.zoojs.org", "http://jayli.github.com/blog");</script>
  </head>
  <body>
    <div id="container">
      <div id="main" role="main">
        <header>
        <h1>将你的 KISSY 程序移植到服务器端 – nodejs-kissy 项目简介</h1>
        </header>
        <nav>
        <span><a title="home page" class="" href="/blog/index.html">home</a></span>
        <span><a title="tags" class="" href="/blog/tags.html">tags</a></span>
        <span><a title="about" class="" href="/blog/about.html">about me</a></span>
        <span><a title="flickr" class="" href="http://www.flickr.com/photos/lijing00333">flickr</a></span>
        <span><a title="blogroll" class="" href="/blog/links.html">links</a></span>
        <span><a title="projects" class="" href="/blog/projects.html">projects</a></span>
        <span><a title="subscribe me" class="" href="/blog/atom.xml">feed</a></span>
        </nav>
        <article class="content">
        <section class="post">
<p>如果你还不了解 NodeJS，请参照 <a href="http://nodejs.org/" target="_blank">NodeJS.org</a>，简言之：</p>

<blockquote>Node.js 是服务器端的 JavaScript 运行环境，它具有<a href="http://en.wikipedia.org/wiki/Non-blocking_algorithm" target="_blank">无阻塞</a>(non-blocking)和<a href="http://en.wikipedia.org/wiki/Event-driven_programming" target="_blank">事件驱动</a>(event-driven)等的特色，Node.js 采用 <a href="http://code.google.com/p/v8/" target="_blank">V8</a> 引擎，同样，Node.js 实现了类似 <a href="http://apache.org/" target="_blank">Apache</a> 和 <a href="http://nginx.org/" target="_blank">nginx</a> 的web服务，让你可以通过它来搭建基于 JavaScript 的 Web App。</blockquote>


<p>你可以通过我们前些天 team 内的一个分享来了解下 NodeJS</p>

<iframe src='http://www.slideshare.net/slideshow/embed_code/5576953' width='500' height='410' border=0></iframe>


<p><strong>nodejs-kissy 项目</strong></p>

<p><a href="http://github.com/kissyteam/kissy" target="_blank">KISSY</a> 是淘宝网开发的一款轻巧灵活的JS框架，如今已经是1.1.5版本，并在淘宝网广泛应用，在浏览器端给我们带来更加清新的体验，今天让我们更进一步，我们发起了<a href="http://github.com/kissyteam/nodejs-kissy" target="_blank">nodejs-kissy</a> 项目，你的 KISSY 程序可以无缝移植到服务器端了</p>

<p><a href="http://ued.taobao.com/blog/wp-content/uploads/2010/11/nodejs-sombrero.png"></a><a href="http://ued.taobao.com/blog/wp-content/uploads/2010/11/未标题-1.png"><img class="alignnone size-full wp-image-2689" src="http://ued.taobao.com/blog/wp-content/uploads/2010/11/未标题-1.png" alt="" width="323" height="86" /></a></p>

<p><strong>从这里开始 nodejs-kissy</strong></p>

<p>得益于 KISSY 轻巧的设计，核心模块可以很充分的解偶，所以对 KISSY 作简单hack就能够运行在 NodeJS 上。但开始之前应该首先准备好预装了 <a href="http://npmjs.org/" target="_blank">npm</a> 的服务器(linux/FreeBSD/MacOS/cygwin)，npm 是 NodeJS 软件包管理器，类似yum 和 apt-get，通过他来安装 NodeJS 的软件包会非常方便。</p>

<p>准备 npm：</p>

<pre><code>curl http://npmjs.org/install.sh | sh
</code></pre>

<p>如果你的账户没有权限则先准备好目录权限：</p>

<pre><code>sudo chown -R $USER /usr/local
</code></pre>

<p>安装成功后就可以通过 <code>"npm install package_name"</code> 命令来安装 NodeJS 软件包了</p>

<p>安装 Nodejs-KISSY 的依赖：服务器端没有浏览器环境，要运行js需要模拟真实的浏览器环境，因此 KISSY 需要依赖一些包：</p>

<pre><code>npm install jsdom
npm install htmlparser
npm install express
npm install connect
</code></pre>

<p>安装Nodejs-kissy：</p>

<pre><code>npm install kissy
</code></pre>

<p>运行 “hello world”：</p>

<p>新建文件 helloworld.js</p>

<pre><code>var S = require('kissy').KISSY;
S.ready(function(S){
        S.log('hello world!');
});
</code></pre>

<p>运行：</p>

<pre><code>node helloworld.js
</code></pre>

<p><strong>更方便的移植?</strong></p>

<p>你可能会好奇，服务器端没有浏览器，为什么KISSY能如此轻松的运行在服务器端？这主要是因为KISSY的模块加载机制是脱离浏览器环境的，也就是说KISSY.use、KISSY.add、KISSY.app是和环境无关的，它只关系到你组织代码的方式和风格，另外，得益于足够原生态的KISSY-DOM实现，KISSY只调用到domjs（domjs的高层api是面向YUI3设计的）的基础方法，所以DOM相关操作依然可以无缝嫁接到服务器端，相对于YUI3核心模块的深层次耦合，KISSY的移植实在是太轻松了。</p>

<p><strong>策略上的取舍</strong></p>

<p>KISSY 基于“one for all”理念的core和粗粒度的widget，使得KISSY可以使用更少的"引入文件"来执行程序，而非必要一定采用combo(即使采用combo性能未必提高多少)，这样使得require的逻辑策略更简便。</p>

<p><strong>所见即所得</strong></p>

<p>和YUI3一样，KISSY-Loader 也可以非常方便的引入外部脚本，不管脚本是存放在服务器上，还是通过http请求到，开发者只要require fullpath即可，非常低碳，比如我可以这样运行：</p>

<pre><code>var S = require('kissy').KISSY;
S.add({
    'menu':{
        fullpath:'http://cdn/menu.js'
    }
}).use('menu',function(S){
    new S.Menu('ID');
});
</code></pre>

<p>总之，你在浏览器端怎么用 KISSY，你就在服务器端怎么写，接下来，nodejs-kissy 项目的主要工作是更多的测试和提高其健壮性。nodejs-kissy 和 KISSY 一样基于 <a href="http://github.com/kissyteam/kissy/blob/master/LICENSE.md" target="_blank">MIT</a> 协议，你可以通过 <a href="https://github.com/kissyteam/nodejs-kissy" target="_blank">fork github</a> 上的项目来参与 nodejs-kissy 的开发。</p>

</section>
<section class="meta">

<!--span class="tags">
  tagged by 
  
</span-->

<span class="time">
  posted at <time datetime="2010-12-19">2010-12-19</time>
</span>
</section>

<section class="comment">
<div id="disqus_thread"></div>
<script type="text/javascript">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'jayliblog'; // required: replace example with your forum shortname
	var disqus_identifier = 'urn:uuid:73850b0d-7217-475b-b665-1034ca71b2dd';

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</section>


        </article>
      </div>
    </div> <!--! end of #container -->
  </body>
</html>
